<template>
  <div
    class="controller-panel"
    :style="{ fontSize: fontSize + 'px' }"
    @mousedown="handlePanelMouseDown"
    data-tauri-drag-region
  >
    <!-- 搜索按钮 -->
    <div class="btn-item btn-search" @mousedown.stop="$emit('search-click')">
      <SearchOutlined />
    </div>

    <!-- 账号信息显示 -->
    <div class="account" v-if="userAccount">
      <span class="account-name" data-tauri-drag-region>{{ userAccount }}</span>
    </div>

    <!-- 连接状态指示器 -->
    <div class="connection-status-wrapper" @mousedown.stop>
      <ConnectionStatusIndicator />
    </div>

    <div class="right">
      <!-- 交易集按钮 -->
      <div class="trading-sets">
        <TradingSetButton
          v-for="setNumber in 4"
          :key="setNumber"
          :set-number="setNumber"
          :is-active="activeSet === setNumber"
          :has-panels="hasActivePanels(setNumber)"
          @click="$emit('set-click', setNumber)"
        />
      </div>

      <!-- 保存按钮 -->
      <div class="btn-item btn-save" @mousedown.stop="$emit('save-click')">存</div>

      <!-- 隐藏按钮 -->
      <div class="btn-item btn-hide" @mousedown.stop="$emit('hide-click')">隐</div>

      <!-- 同步按钮 -->
      <div
        class="btn-item btn-tongbu"
        :class="{ 'sync-active': isSyncMode }"
        @mousedown.stop="$emit('sync-panels-click')"
      >
        同
      </div>

      <div class="count">{{ totalPanelsCount || 0 }}</div>

      <!-- 退出按钮 -->
      <div class="btn-item btn-exit" @mousedown.stop="$emit('exit-click')">
        <CloseOutlined />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from "vue";
import TradingSetButton from "./TradingSetButton.vue";
import ConnectionStatusIndicator from "../ConnectionStatusIndicator.vue";
import { UserStorageService } from "../../services/userStorage";
import type { WebviewWindow } from "@tauri-apps/api/webviewWindow";
import { SearchOutlined, CloseOutlined } from "@ant-design/icons-vue";

interface Props {
  activeSet: number;
  fontSize: number;
  hasActivePanels: (setNumber: number) => boolean;
  tradingPanels?: Map<string, WebviewWindow>;
  isSyncMode?: boolean;
}

const props = defineProps<Props>();

const emit = defineEmits<{
  "set-click": [setNumber: number];
  "search-click": [];
  "save-click": [];
  "hide-click": [];
  "exit-click": [];
  "show-all": [];
  "sync-panels-click": [];
}>();

// 用户账号信息
const userAccount = ref<string>("");

// 计算当前所有合约详情面板的个数
const totalPanelsCount = computed(() => {
  if (!props.tradingPanels) {
    return 0;
  }
  return props.tradingPanels.size;
});

// 显示的计数数字，超过99显示99+
const displayCount = computed(() => {
  const count = totalPanelsCount.value;
  if (count > 99) {
    return "99+";
  }
  return count.toString();
});

// 获取用户账号信息
const loadUserAccount = () => {
  const userInfo = UserStorageService.getUserInfo();
  if (userInfo && userInfo.account) {
    userAccount.value = userInfo.account;
  }
};

// 处理面板鼠标按下事件
const handlePanelMouseDown = (event: MouseEvent) => {
  // 只处理左键点击
  if (event.button !== 0) return;

  // 检查按下的是否是按钮区域
  const target = event.target as HTMLElement;

  // 如果按下的是按钮或按钮内的元素，不处理
  if (target.closest(".btn-item") || target.closest(".trading-sets")) {
    return;
  }

  // 处理双击事件 - 阻止双击最大化
  if (event.detail === 2) {
    event.preventDefault();
    event.stopPropagation();
    return;
  }

  // 处理单击 - 按下的是空白区域，显示所有面板
  if (event.detail === 1) {
    emit("show-all");
  }
};

// 组件挂载时加载用户信息
onMounted(() => {
  loadUserAccount();
});
</script>

<style scoped>
.controller-panel {
  width: auto;
  height: 100%;
  background: rgb(92, 92, 192);
  border-radius: 4px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); */
  user-select: none;
  padding: 0 10px;
  gap: 8px;
  box-sizing: border-box;
  flex: 1;

  .right {
    display: flex;
    gap: 8px;
    align-items: center;
  }
}

.account {
  display: flex;
  align-items: center;
  gap: 4px;
  color: white;
  font-size: 12px;
  /* background: rgba(0, 0, 0, 0.2); */
  /* padding: 4px 8px; */
  border-radius: 4px;
  /* border: 1px solid rgba(255, 255, 255, 0.2); */
}

.account-label {
  opacity: 0.8;
  font-weight: normal;
}

.account-name {
  font-weight: bold;
  color: #fff;
}

.connection-status-wrapper {
  display: flex;
  align-items: center;
  margin-left: 8px;
}

.trading-sets {
  display: flex;
  gap: 8px;
  align-items: center;
}

.btn-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  color: white;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;

  &:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
  }
  &:active {
    background: rgba(255, 255, 255, 0.3);
  }

  &.sync-active {
    background: rgba(76, 175, 80, 0.8);
    border-color: rgba(76, 175, 80, 1);
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.6);

    &:hover {
      background: rgba(76, 175, 80, 0.9);
      border-color: rgba(76, 175, 80, 1);
    }
  }
}

.btn-search {
  background: rgba(33, 150, 243, 0.2);
  border-color: rgba(33, 150, 243, 0.4);
}
.btn-exit {
  color: red;
  background-color: #fff;
}

.count {
  color: white;
  font-size: 12px;
  font-weight: bold;
  min-width: 20px;
  max-width: 24px;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
